<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 1. 头部固定 -->
    <header>
        <div class="top">
            <div class="left">
                <a href="https://m.bilibili.com/">
                    <i class="iconfont Navbar_logo"></i>
                </a>
            </div>
            <div class="right">
                <a href="https://m.bilibili.com/search">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="https://m.bilibili.com/space?from=headline" class="login"><img src="./images/login.png"
                        alt=""></a>
                <a href="https://d.bilibili.com/download_app.html?preUrl=https%3A%2F%2Fm.bilibili.com%2Findex.html&schema=bilibili%3A%2F%2Fhome%3Ftab_name%3D%E7%83%AD%E9%97%A8&h5awaken=dGVjaF90eXBlPXVuaXZlcnNhbCZwdmlkPUYzMzMwNjQ3LUI1QzYtMDc0MC01ODdFLTQyNTdBRjU2RUYxOTYyMjg3aW5mb2NfMF8xNjcxMzUxNjY2NjU0JnVhPU1vemlsbGElMkY1LjAlMjAoaVBob25lJTNCJTIwQ1BVJTIwaVBob25lJTIwT1MlMjAxM18yXzMlMjBsaWtlJTIwTWFjJTIwT1MlMjBYKSUyMEFwcGxlV2ViS2l0JTJGNjA1LjEuMTUlMjAoS0hUTUwlMkMlMjBsaWtlJTIwR2Vja28pJTIwVmVyc2lvbiUyRjEzLjAuMyUyME1vYmlsZSUyRjE1RTE0OCUyMFNhZmFyaSUyRjYwNC4xJTIwRWRnJTJGMTA4LjAuMC4wJmlzQXV0b09wZW49ZmFsc2Umb3Blbl9hcHBfZnJvbV90eXBlPWg1Jm9wZW5fYXBwX3V1aWQ9Qzg1MzY5MzQtNDc3Qi00QkQxMC1CREY0LTk0QkVDNEE4N0VDMTYzMjUwaW5mb2Mmb3Blbl9hcHBfZ3JvdXBpZD0lN0IlMjJvcmdhbmljX2g1X2FudGlfaW50ZXJjZXB0X3BvcF91YyUyMiUzQSUyMjElMjIlMkMlMjJvcmdhbmljX2g1X2FudGlfaW50ZXJjZXB0X3BvcF9rdWFrZSUyMiUzQSUyMjIlMjIlN0Qmb3Blbl9hcHBfdXJsPWh0dHBzJTNBJTJGJTJGbS5iaWxpYmlsaS5jb20lMkYmb3Blbl9hcHBfYWRkaXRpb249JTdCJTIyc3BtaWQlMjIlM0ElMjIzMzMuNDAwLmNsaWNrLnRvcERvd25sb2FkJTIyJTJDJTIyZ3JvdXBfaWQlMjIlM0ExNSUyQyUyMmJzb3VyY2UlMjIlM0ElMjJkZWZhdWx0JTIyJTJDJTIydW5pcXVlX2slMjIlM0FudWxsJTJDJTIyc2Vzc2lvbklkJTIyJTNBJTIyeW43a2UwcWs5d2k3bDg0aWxidDNtZ25sJTIyJTJDJTIydWFTb3VyY2UlMjIlM0ElMjIlMjIlMkMlMjJzaGFyZV90aW1lcyUyMiUzQW51bGwlMkMlMjJzaGFyZV9mcm9tJTIyJTNBJTIyJTIyJTJDJTIycGFnZXZpZXdfaWQlMjIlM0ElMjI2ODRrNmh2czFkbzByNnlxbGJ0M21nbmwlMjIlMkMlMjJoNV9idXZpZCUyMiUzQSUyMkYzMzMwNjQ3LUI1QzYtMDc0MC01ODdFLTQyNTdBRjU2RUYxOTYyMjg3aW5mb2MlMjIlMkMlMjJpdGVtX2lkJTIyJTNBMCUyQyUyMml0ZW1fbGFiZWwlMjIlM0ElMjIlMjIlN0Q%3D"
                    class="download"><img src="./images/download.png" alt=""></a>
            </div>
        </div>
        <div class="bottom">
            <div class="tab">
                <ul>
                    <li><a href="https://m.bilibili.com/" class="current">首页</a></li>
                    <li><a href="https://m.bilibili.com/channel/v/douga">动画</a></li>
                    <li><a href="https://m.bilibili.com/channel/v/anime">番剧</a></li>
                    <li><a href="https://m.bilibili.com/channel/v/guochuang">国创</a></li>
                    <li><a href="https://m.bilibili.com/channel/v/music">音乐</a></li>
                </ul>
            </div>
            <div class="more">
                <a href="#">
                    <i class="iconfont general_pulldown_s"></i>
                </a>
            </div>
        </div>
    </header>
    <!-- tab: 菜单的个数要和内容的个数相等的 -->
    <!-- 2. 视频 -->
    <!-- 视频区域布局 -->
    <section class="video_content">
        <!-- 一份视频, 共计有5个菜单, 应该有5份视频的div -->
        <div class="video_list">
            <a href="https://m.bilibili.com/video/BV1NG4y1J7wL">
                <div class="pic">
                    <img src="./images/yangcun.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>319.7</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>6.8</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">羊村（4）</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1JV4y1A7NZ">
                <div class="pic">
                    <img src="./images/geizhe.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>519.5</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">给这支足球队送完外卖，我崩溃了。</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1B8411p7Bi">
                <div class="pic">
                    <img src="./images/xiaozhi.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>136.1</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2527</span>
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">小智走了...我看不懂也绷不住了...</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1pA41197Ja">
                <div class="pic">
                    <img src="./images/weishenme.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>209.7</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>3617</span>
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">为什么我们的三观这么整？原来以前从广告就开始熏陶了！</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1sW4y1T7Qq">
                <div class="pic">
                    <img src="./images/jiaren.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>64</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>157</span>
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">家人们，哪个姿势的布洛芬最有效？</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1e24y1D7qt">
                <div class="pic">
                    <img src="./images/shuihuzhuan.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>78.8</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.1</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">终了！荡气回肠！水浒传结局好在哪儿？《水浒传》P50</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1W14y1N7Jh">
                <div class="pic">
                    <img src="./images/boshi.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>159.3</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>1543</span>
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">博士生5千元造了8轮的士 儿子们再也不怕迟到了</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1e24y1X7ft">
                <div class="pic">
                    <img src="./images/xiecheng.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>58.7</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>1135</span>
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">深圳.协成海鲜火锅 厨子探店¥7？？？</div>
            </a>
            <a href="https://m.bilibili.com/video/BV1gG4y1g7f7">
                <div class="pic">
                    <img src="./images/baozha.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>237</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>3.9</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">爆炸了！这期真的爆炸了！！！</div>
            </a>
            <a href="https://m.bilibili.com/video/BV13g411E7Ur">
                <div class="pic">
                    <img src="./images/tangmu.webp" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>61.4</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2173</span>
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">为千万ikun构建理论和实践体系，他如何让坤流重返巅峰？【ikun人物志：汤姆老师】</div>
            </a>

        </div>
    </section>
    <!-- 3. 按钮固定 -->
</body>

</html>